<template>
	<view class="page">
		<!-- 顶部背景与导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar title="土壤检测问题反馈" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder>
			<view class="u-nav-slot" slot="right">
				<view class="nav-add-btn" @click="onAdd">添加</view>
			</view>
		</u-navbar>
		<view style="height: 80rpx;"></view>

		<view class="content">
			<!-- 筛选区域 -->
			<view class="filters">
				<!-- 顶部搜索条 -->
				<view class="search-bar">
					<uni-easyinput v-model="filters.keyword" placeholder="请输入标题/发送单位" clearable prefixIcon="search" />
					<button class="btn btn-search" @click="onSearch">
						<u-icon name="search" color="#fff" size="18" style="margin-right:8rpx" />搜索
					</button>
				</view>

				<view class="row">
					<text class="label">发送时间</text>
					<view class="range">
						<picker mode="date" :value="filters.startDate" @change="onStartChange">
							<view class="picker-input">
								<u-icon name="calendar" color="#29a74d" size="18" class="ico" />
								<text class="placeholder" v-if="!filters.startDate">开始日期</text>
								<text v-else>{{ filters.startDate }}</text>
							</view>
						</picker>
						<text class="mid">至</text>
						<picker mode="date" :value="filters.endDate" @change="onEndChange">
							<view class="picker-input">
								<u-icon name="calendar" color="#29a74d" size="18" class="ico" />
								<text class="placeholder" v-if="!filters.endDate">结束日期</text>
								<text v-else>{{ filters.endDate }}</text>
							</view>
						</picker>
					</view>
					<button class="btn btn-ghost" style="margin-left: 10rpx;" @click="onQuery">查询</button>
				</view>

				<view class="row">
					<text class="label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</text>
					<view class="ctrl">
						<uni-data-select v-model="filters.status" :localdata="statusOpts" placeholder="请选择状态" />
					</view>
					<button class="btn btn-ghost gray" @click="onReset" style="margin-left: 10rpx;">重置</button>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list">
				<view class="card" v-for="item in list" :key="item.id">
					<view class="info">
						<view class="line head">
							<view class="title">{{ item.title }}</view>
							<view class="chip" :class="item.read ? 'green' : 'red'">{{ item.read ? '已查看' : '未查看' }}
							</view>
						</view>
						<view class="line subt">
							<text class="k">{{ item.source }}</text>
						</view>
						<view class="line subt">
							<text class="k">发送单位：</text>{{ item.unit }}
						</view>
						<view class="foot">
							<view class="time"><u-icon name="calendar" size="16" color="#64748b"
									style="margin-right:6rpx" /><text>{{ item.time }}</text></view>
							<button class="op" @click="viewItem(item)">查看</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 详情弹窗（放在列表外，避免结构混乱） -->
			<uni-popup ref="detailPopup" type="center" :is-mask-click="true">
				<view class="popup-card">
					<view class="popup-head">
						<text class="popup-title">问题反馈详情</text>
						<u-icon name="close" size="22" color="#4b5563" @click="closeDetail" />
					</view>
					<view class="popup-body">
						<view class="row"><text class="k">标题</text><text class="v">{{ selected.title }}</text></view>
						<view class="row"><text class="k">发送单位</text><text class="v">{{ selected.unit }}</text></view>
						<view class="row"><text class="k">接收部门</text><text class="v">{{ selected.dept }}</text></view>
						<view class="row"><text class="k">类别</text><text class="v">{{ selected.category }}</text></view>
						<view class="row"><text class="k">内容</text><text class="v">{{ selected.content }}</text></view>
						<view class="row"><text class="k">备注</text><text class="v">{{ selected.remark }}</text></view>
						<view class="row">
							<text class="k">附件</text>
							<text class="v"><text class="link" @click="openAttachment">{{ selected.attachName
									}}</text></text>
						</view>
					</view>
					<view class="popup-foot">
						<button class="btn btn-ghost" @click="closeDetail">关闭</button>
					</view>
				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
		data() {
			return {
				filters: {
					keyword: '',
					startDate: '',
					endDate: '',
					status: ''
				},
				statusOpts: [{
						text: '全部',
						value: ''
					},
					{
						text: '未查看',
						value: 'unread'
					},
					{
						text: '已查看',
						value: 'read'
					}
				],
				list: [{
						id: 1,
						title: '样品检测异常',
						source: '系统录入',
						unit: '山东省林业局',
						time: '2024-05-10 9:15:23',
						read: false
					},
					{
						id: 2,
						title: '数据上报延迟',
						source: 'app提交',
						unit: '济南市林业局',
						time: '2024-05-10 9:15:23',
						read: true
					},
					{
						id: 3,
						title: '系统登录异常',
						source: '系统录入',
						unit: '青岛市林业局',
						time: '2024-05-10 9:15:23',
						read: false
					}
				],
				selected: { title: '', unit: '', dept: '', category: '', content: '', remark: '', attachName: '异常报告.pdf' }
			}
		},
		methods: {
			onAdd() {
				uni.showToast({
					title: '新建反馈',
					icon: 'none'
				})
			},
			onSearch() {
				/* TODO: 搜索接口 */ },
			onQuery() {
				/* TODO: 时间范围查询 */ },
			onReset() {
				this.filters = {
					keyword: '',
					startDate: '',
					endDate: '',
					status: ''
				}
			},
			onStartChange(e) {
				this.filters.startDate = e?.detail?.value || ''
			},
			onEndChange(e) {
				this.filters.endDate = e?.detail?.value || ''
			},
			viewItem(item) {
				// 组织弹窗展示信息
				this.selected = {
					title: item.title,
					unit: item.unit,
					dept: '省自然资源厅',
					category: item.source,
					content: item.title === '样品检测异常' ? '检测过程中发现样品数据异常，请核查。' : '请尽快处理相关问题。',
					remark: '请尽快处理',
					attachName: '异常报告.pdf'
				}
				item.read = true
				this.$refs.detailPopup && this.$refs.detailPopup.open('center')
			},
			closeDetail() { this.$refs.detailPopup && this.$refs.detailPopup.close() },
			openAttachment() { uni.showToast({ title: '预览附件：' + this.selected.attachName, icon: 'none' }) }
		}
	}
</script>

<style lang="scss">
	/* 绿色主题变量 */
	$brand: #29a74d;
	$brand-weak: #e9f7ee;
	$brand-border: #cfe9db;
	$brand-strong: #239243;

	.mine-navbar-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 180rpx;
		z-index: 2;
	}

	.page {
		background: #f6f7fb;
		min-height: 100vh;
	}

	.content {
		padding: 24rpx;
	}

	/* 导航右侧添加按钮 */
	.nav-add-btn {
		background: $brand-weak;
		color: $brand-strong;
		border-radius: 14rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 26rpx;
		font-size: 26rpx;
		box-shadow: 0 2rpx 8rpx rgba(41, 167, 77, 0.10);
		border: 1rpx solid $brand-border;
	}

	/* 筛选卡片 */
	.filters {
		position: relative;
		background: #fff;
		border: 1rpx solid #e3f3ea;
		border-radius: 18rpx;
		padding: 12rpx 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 6rpx 18rpx rgba(12, 18, 28, 0.04);
	}

	.search-bar {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 8rpx 6rpx 6rpx;
	}

	::v-deep .search-bar .uni-easyinput__content {
		height: 72rpx;
		border-radius: 999rpx;
		border-color: $brand-border;
		background: $brand-weak;
	}

	::v-deep .search-bar .is-input-focus .uni-easyinput__content {
		border-color: $brand;
		box-shadow: 0 0 0 2rpx rgba(41, 167, 77, 0.15);
	}

	.btn-search {
		background: linear-gradient(90deg, lighten($brand, 2%), $brand-strong);
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 26rpx;
		border-radius: 999rpx;
		font-size: 26rpx;
		box-shadow: 0 6rpx 14rpx rgba(37, 154, 68, 0.22);
		display: inline-flex;
		align-items: center;
		gap: 10rpx;
		white-space: nowrap;
	}

	.row {
		display: flex;
		align-items: center;
		padding: 10rpx 6rpx;
		gap: 12rpx;
	}

	.label {
		color: #666;
		font-size: 28rpx;
		white-space: nowrap;
		margin-right: 10rpx;
	}

	.range {
		flex: 1;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 12rpx;
		align-items: center;
		min-width: 0;
	}

	.mid {
		color: #9ca3af;
	}

	.picker-input {
		height: 72rpx;
		border: 1rpx solid $brand-border;
		border-radius: 14rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		min-width: 0;
		background: $brand-weak;
	}

	.picker-input .ico {
		margin-right: 10rpx;
	}

	.picker-input .placeholder {
		color: #999;
	}

	.ctrl {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.btn {
		border: none;
	}

	.btn-ghost {
		background: $brand-weak;
		color: $brand-strong;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 24rpx;
		border-radius: 14rpx;
		font-size: 26rpx;
		box-shadow: inset 0 0 0 1rpx $brand-border;
	}

	.btn-ghost.gray {
		background: #cfd4da;
		color: #fff;
		box-shadow: none;
		border: none;
	}

	::v-deep .uni-select,
	::v-deep .uni-stat__select .uni-select {
		height: 72rpx;
		min-height: 72rpx;
		border-radius: 14rpx;
		border-color: $brand-border;
		background: $brand-weak;
	}

	::v-deep .uni-select__input-text {
		line-height: 72rpx;
		font-size: 28rpx;
	}

	/* 列表卡片 */
	.list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.card {
		position: relative;
		background: #fff;
		border: 1rpx solid #e3f3ea;
		border-radius: 18rpx;
		padding: 18rpx;
		box-shadow: 0 8rpx 22rpx rgba(12, 18, 28, 0.05);
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.card::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 6rpx;
		background: linear-gradient(180deg, $brand, $brand-strong);
		opacity: .9;
	}

	.info {
		min-width: 0;
	}

	.line {
		color: #333;
		font-size: 28rpx;
		line-height: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
	}

	.line+.line {
		border-top: 1rpx dashed #eef2f7;
	}

	.line.head {
		border-top: none;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		font-weight: 700;
		color: #111827;
	}

	.k {
		color: #6b7280;
	}

	.subt {
		color: #6b7280;
	}

	.chip {
		display: inline-flex;
		align-items: center;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 16rpx;
		border-radius: 999rpx;
		font-size: 24rpx;
		border: 1rpx solid #e5e7eb;
	}

	.chip.green {
		color: $brand-strong;
		background: $brand-weak;
		border-color: $brand-border;
	}

	.chip.red {
		color: #ef4444;
		background: #fff1f2;
		border-color: #fecaca;
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 8rpx;
	}

	.time {
		color: #94a3b8;
		font-size: 24rpx;
		background: #f8fafc;
		padding: 6rpx 10rpx;
		border-radius: 10rpx;
		display: inline-flex;
		align-items: center;
	}

	.op {
		background: #fff;
		color: $brand-strong;
		border: 1rpx solid $brand-border;
		border-radius: 16rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 24rpx;
		font-size: 24rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(41, 167, 77, 0.08);
	}

	.op:active {
		transform: translateY(1rpx);
		box-shadow: 0 1rpx 4rpx rgba(41, 167, 77, 0.10);
	}

	/* 弹窗样式 */
	.popup-card { width: 620rpx; background: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 16rpx 36rpx rgba(12,18,28,.16); border: 1rpx solid #eef2f7; }
	.popup-head { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 22rpx; background: linear-gradient(90deg, $brand-weak, #f7fbf9); border-bottom: 1rpx solid $brand-border; }
	.popup-title { font-weight: 700; color: #111827; font-size: 30rpx; }
	.popup-body { padding: 16rpx 22rpx 6rpx; }
	.popup-body .row { display: flex; padding: 12rpx 0; }
	.popup-body .k { width: 160rpx; color: #6b7280; }
	.popup-body .v { flex: 1; color: #1f2937; white-space: pre-wrap; }
	.popup-foot { padding: 14rpx 22rpx 20rpx; display: flex; justify-content: center; }
	.popup-foot .btn-ghost { min-width: 200rpx; }
	.link { color: $brand-strong; text-decoration: underline; }

	/* 弹窗样式 */
	.popup-card { width: 620rpx; background: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 16rpx 36rpx rgba(12,18,28,.16); border: 1rpx solid #eef2f7; }
	.popup-head { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 22rpx; background: linear-gradient(90deg, $brand-weak, #f7fbf9); border-bottom: 1rpx solid $brand-border; }
	.popup-title { font-weight: 700; color: #111827; font-size: 30rpx; }
	.popup-body { padding: 16rpx 22rpx 6rpx; }
	.popup-body .row { display: flex; padding: 12rpx 0; }
	.popup-body .k { width: 160rpx; color: #6b7280; }
	.popup-body .v { flex: 1; color: #1f2937; white-space: pre-wrap; }
	.popup-foot { padding: 14rpx 22rpx 20rpx; display: flex; justify-content: center; }
	.popup-foot .btn-ghost { min-width: 200rpx; }
	.link { color: $brand-strong; text-decoration: underline; }
</style>